import React, {Component} from "react";
import {
    BannerContainer,
    CoverBox,
    HomeBaseWrapper,
    HomeContainer,
    HomeLeftContainer,
    HomeRightContainer,
    HomeWrapperBackground
} from "./style";
import NewsList from './NewsList'
import BoardList from "./BoardList";
import RecommendList from "./RecommendList";
import {connect} from "react-redux";
import {actions} from '@/store/home/Article';
import {getIndexHomePage} from "@/api/artArticleInfo";
import CardList from "@/component/Home/CardList";
import {getPath} from "@/util/routerUtil";
import EventBus from "@/util/EventBus";
import {getCategoryList} from "@/api/artPageCategory";
import Slider from "react-slick";
import {getHomeBanners} from "../../api/SysHomeBanner";


class Home extends Component {
    constructor(props) {
        super(props);
        this.handleGetIndexHomePage = this.handleGetIndexHomePage.bind(this);
        this.handleGetArtPageCategory = this.handleGetArtPageCategory.bind(this);
        this.handleClickSearchBtn = this.handleClickSearchBtn.bind(this);
        this.handleInputSearchInfo = this.handleInputSearchInfo.bind(this);
        this.handleSearchFocusEvent = this.handleSearchFocusEvent.bind(this);
        this.handleSearchBoxKeyDown = this.handleSearchBoxKeyDown.bind(this);
        this.handleTopBannerView = this.handleTopBannerView.bind(this);
        this.handleGetHomeBanner = this.handleGetHomeBanner.bind(this);
        this.getBannerByIndex = this.getBannerByIndex.bind(this);

        this.state = {
            HomeBanner:[],
            ArticleList: [],
            ArtPageCategory: [],
            searchValue: '',
            searchFocused: false,
            selectCategory: null,
            settings: {
                customPaging: function(i) {
                    return (
                        <a> <img width={'40px'} height={'40px'} src={this.getBannerByIndex(i)}/> </a>
                );
                }.bind(this),
                dots:true,
                dotsClass: "slick-dots slick-thumb",
                autoplay:true,
                fade: true,
                swipeToSlide: true,
                infinite: true,
                speed: 500,
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    }

    getBannerByIndex(index){
        return this.state.HomeBanner && this.state.HomeBanner.length > 0 ? this.state.HomeBanner[index]['coverFile'] : null;
    }

    handleInputSearchInfo(e) {
        this.setState({searchValue: e.target.value})
    }

    handleSearchFocusEvent(bool) {

    }

    handleGetHomeBanner(){
        getHomeBanners().then( res => {
            if(res.success && res.data){
                this.setState({HomeBanner:res.data})
            }
        })
    }

    handleClickSearchBtn(e) {
        e.preventDefault();
        if (getPath() === '/search') {
            EventBus.emit('searchGames', this.state.searchValue)
        } else {
            this.props.history.push({pathname: '/search', query: {kw: this.state.searchValue}});
        }
    }

    componentDidMount() {
        this.handleGetHomeBanner();
        this.handleGetIndexHomePage();
        this.handleGetArtPageCategory();
    }

    handleGetIndexHomePage(params) {
        if (params) {
            this.setState({
                selectCategory: params.pageCategory || null
            })
        }
        getIndexHomePage(params).then(res => {
            this.setState({
                ArticleList: res.data
            })
        })
    }

    handleGetArtPageCategory(params) {
        getCategoryList(params).then(res => {
            if (res.success) {
                this.setState({
                    ArtPageCategory: res.data.rows
                })
            }
        })
    }

    handleTopBannerView() {
       return this.state.HomeBanner && this.state.HomeBanner.length ?
           this.state.HomeBanner.map(banner => {
                return <BannerContainer key={banner.id} bannerUrl={banner.coverFile}/>
           }) : null
    }

    handleSearchBoxKeyDown(e) {
        if (e.key === 'Enter') {
            this.handleClickSearchBtn(e)
        }
    }

    render() {
        return (<>

                <HomeContainer>
                    <HomeWrapperBackground>
                        <CoverBox>
                            <Slider {...this.state.settings}>

                                {
                                    /* 渲染开始位置轮播图 */
                                    this.handleTopBannerView()
                                }

                            </Slider>
                        </CoverBox>
                        <HomeBaseWrapper>
                            {/** 左容器 **/}
                            <HomeLeftContainer>
                                <NewsList ArticleList={this.state.ArticleList || []}
                                          ArtPageCategory={this.state.ArtPageCategory || []}
                                          handleSelectCategory={this.handleGetIndexHomePage}
                                          selectCategory={this.state.selectCategory}
                                />
                                <CardList/>
                            </HomeLeftContainer>
                            {/** 右容器 **/}
                            <HomeRightContainer>
                                <BoardList className='board-list'/>
                                <RecommendList/>
                            </HomeRightContainer>
                        </HomeBaseWrapper>
                    </HomeWrapperBackground>
                </HomeContainer>
            </>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        ArticleList: state.getIn(['HomeArticle', 'ArticleList']),
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getHomeArticle() {
            dispatch(actions.SagaQuery());
        }
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
